<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            display: flex;
            /* flex-direction: column; */
        }
        .main > div {
            /* width: 100px; */
            height: 100px; 
            border: solid;
        }
        /* 
            flex-basis 设置项目在主轴上的 尺寸（不能参与剩余空间的分配）
            主轴是X轴表示宽度，主轴是Y轴表示高度

            flex属性是flex-grow，flex-shrink 和flex-basis 的简写
            只设置一个值表示的是flex-grow的值
            属性值按照flex-grow，flex-shrink 和flex-basis的顺序设置
            属性值之间用空格隔开
            默认值为0 1 auto
            auto (1 1 auto)
            none (0 0 aotuo)
        */
        .main > div:nth-child(1) {
            /* flex-basis: 100px; */
            flex: 1;
        }
        .main > div:nth-child(2) {
            /* flex-basis: 200px; */
            flex: 1 1 auto;
        }
        .main > div:nth-child(3) {
            flex: 1;
            /* flex-basis: 200px; */
        }
        .main > div:nth-child(4) {
            flex: none;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>